<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-05-21 09:54:00
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-07-22 16:27:14
 * @FilePath: \hn-fire-product-mobile\src\pages\home\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import {whManagerBsTbExamRecordGetMyExamRecordListUsingPost} from '@/genapi/wh'
import { useUserStore } from '@/stores/user';

defineOptions({ name: 'ExamScores' });

const userStore = useUserStore();
const router = useRouter();

const jumpTo = async () => {
    router.replace({ path: '/home/examPage' });
}
const examList = ref()
whManagerBsTbExamRecordGetMyExamRecordListUsingPost({}).then((res) => {
    examList.value = res.data
})
</script>

<template>
	<div class="examScores">
        <img class="joinExamine" src="../assets/join.png" @click="jumpTo()" />
        <div class="examItem" v-for="(item,i) in examList" :key="i">
            <div class="examDetails">
                <div class="examLabel">考试成绩 | 
                    <span class="examTitle">{{item.examScore}}分</span>
                </div>
                <span class="timeStamp">考试时间：{{ item.examDate }}</span>
            </div>
            <img class="passIcon" v-if="item.examScore>=80" src="../assets/pass.png"></img>
            <img class="passIcon" v-else src="../assets/fail.png"></img>
            
        </div>
    </div>
</template>

<style scoped lang="scss">
.examScores {
	height: 100%;
	width: 100%;
    .joinExamine{
        margin-bottom:5px;
    }
    .examItem{
        width:100%;
        height:70px;
        display: flex;
        justify-content: space-between;
        background-color: #F9FAFD;
        padding:10px 10px;
        font-size:14px;
        .examDetails{
            width:80%;
        }
        .examLabel{
            width:100%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            text-wrap: nowrap;
            color:#4691d6;
            font-weight:600;
            span{
                color:#000;
                font-weight:300;
            }
        }
        .timeStamp{
            font-size:11px;
            font-weight:600;
            color:#9699a1;
        }
        .passIcon{
            width:40px;
            height:19px;
        }
    }
}
</style>
